{% extends 'layouts/base.html' %}

{% block title %} {% if search %}搜索文章: {{ search }}{% else %}全部文章
{% endif %} {% endblock title %}

{% block content %}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6>{% if search %}搜索文章: {{ search }}{% else %}
                            全部文章{% endif %}
                            (<span id="post-number">{{ post_number }}</span>篇)
                            <a href="/new.html" class="text-primary text-lg">
                                <i class="fa-solid fa-plus"></i>
                            </a>
                        </h6>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                <tr>
                                    <th class="text-secondary text-xxs font-weight-bolder opacity-7">
                                        <span class="px-1 text-secondary">文章名</span>
                                    </th>
                                    <th class="text-secondary text-xxs font-weight-bolder opacity-7">
                                        <span class="text-secondary">大小</span>
                                    </th>
                                    <th class="text-center text-secondary text-xxs font-weight-bolder opacity-7">
                                        <span class="text-secondary">状态</span>
                                    </th>
                                    <th class="text-secondary text-xxs font-weight-bolder opacity-7">
                                        <span class="text-secondary">操作</span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody id="posts-list">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer py-4">
                        <ul class="pagination justify-content-end mb-0">
                            <li class="page-item" id="prev-page">
                                <a class="page-link"
                                   href="javascript:prev_page()">
                                    <i class="fas fa-angle-left"></i>
                                    <span class="sr-only">上一页</span>
                                </a>
                            </li>
                            {% for i in page_number|get_range %}
                                <li class="page-item" id="page-{{ i }}">
                                    <a class="page-link"
                                       href="javascript:change_page({{ i }})">{{ i }}</a>
                                </li>
                            {% endfor %}

                            <li class="page-item" id="next-page">
                                <a class="page-link"
                                   href="javascript:next_page()">
                                    <i class="fas fa-angle-right"></i>
                                    <span class="sr-only">下一页</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {% include "includes/footer.html" %}

    </div>
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel"
         aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content bg-white">
                <div class="modal-header" style="border: none;">
                    <h5 class="modal-title fs-5" id="deleteModalLabel">提示</h5>
                    <button type="button" data-bs-dismiss="modal"
                            aria-label="Close" style="box-sizing: content-box;width: 1em;height:
                            1em;padding: .25em;color: #8392ab;border: 0;border-radius: .375rem;
                            opacity: .5;background: none">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    确认要删除 <a id="delfile"></a> 吗？此操作不可撤回
                </div>
                <div class="modal-footer" style="border: none;">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消
                    </button>
                    <button type="button" class="btn btn-primary" onclick="delete_file()"
                            data-bs-dismiss="modal">确定
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="renameModal" tabindex="-1" aria-labelledby="renameModalLabel"
         aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content bg-white">
                <div class="modal-header" style="border: none;">
                    <h5 class="modal-title fs-5" id="renameModalLabel">重命名</h5>
                    <button type="button" data-bs-dismiss="modal"
                            aria-label="Close" style="box-sizing: content-box;width: 1em;height:
                            1em;padding: .25em;color: #8392ab;border: 0;border-radius: .375rem;
                            opacity: .5;background: none">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group"><label class="form-control-label">新名称</label><input
                            type="text" name="name" id="edit-name" value=""
                            class="form-control bg-white text-dark">
                    </div>
                </div>
                <div class="modal-footer" style="border: none;">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消
                    </button>
                    <button type="button" class="btn btn-primary" onclick="rename_file()"
                            data-bs-dismiss="modal">确定
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}

    <script>
        var posts = {{ all_posts|safe }};
        var _page = 1;
        var operate_post;

        function change_page(page) {
            scrollToTop();
            let color = checkIfDark() ? "text-white" : "text-dark";
            let post_temp = `<tr>
                                <td>
                                    <div class="d-flex px-4 py-1">
                                        <h6 class="mb-0 text-sm">@@name@@</h6>
                                    </div>
                                </td>
                                <td>
                                    <span class="text-xs font-weight-bold opacity-8
                                    ${color}">@@size@@</span>
                                </td>
                                <td class="align-middle text-center text-sm">
                                    @@status@@
                                </td>
                                <td class="align-middle">
                                    <a href="/edit.html?file=@@path@@&amp;postname=@@fullname@@"><i
                                    class="fa fa-edit
                                    text-primary text-xxs"></i></a> |
                                    <a href="javascript:query_rename('@@path@@')"><i class="fa-solid fa-file
                                    me-2 text-primary text-xxs"></i></a>| <a
                                    href="javascript:query_delete('@@path@@')"><i class="fa
                                    fa-trash-alt me-2 text-primary text-xxs"></i></a>
                                </td>
                            </tr>`;
            let page_posts;
            if (posts.length > page * 15 + 1) {
                page_posts = posts.slice(15 * (page - 1), page * 15);
            } else {
                page_posts = posts.slice(15 * (page - 1));
            }
            let list = "";
            for (let i = 0; i < page_posts.length; i++) {
                let status = page_posts[i].status ? `<span class="badge badge-sm
                bg-gradient-success">发布</span>` : `<span class="badge badge-sm
                bg-gradient-secondary">草稿</span>`;
                list += post_temp.replaceAll("@@name@@", excerpt_by_local(page_posts[i].name, 50))
                    .replaceAll("@@size@@", page_posts[i].size)
                    .replaceAll("@@status@@", status)
                    .replaceAll("@@path@@", encodeURIComponent(page_posts[i].path))
                    .replaceAll("@@fullname@@", encodeURIComponent(page_posts[i].name));
            }
            $("#page-" + _page).removeClass("active");
            $("#page-" + _page).children().removeClass("text-white");
            $("#page-" + page).addClass("active");
            $("#page-" + page).children().addClass("text-white");
            $("#posts-list").html(list);
            _page = page;
            if (page <= 1) {
                $("#prev-page").addClass("disabled");
            } else {
                $("#prev-page").removeClass("disabled");
            }
            if (page >={{ page_number }}) {
                $("#next-page").addClass("disabled");
            } else {
                $("#next-page").removeClass("disabled");
            }
        }

        function prev_page() {
            if (_page > 1) {
                change_page(_page - 1);
            } else {
                notyf.error("已是第一页");
            }
        }

        function next_page() {
            if (_page <{{ page_number }}) {
                change_page(_page + 1);
            } else {
                notyf.error("已是最后一页");
            }
        }

        change_page(1);

        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });


        function query_delete(name) {
            $("#delfile").text(name);
            $("#deleteModal").modal("show");
        }

        function query_rename(name) {
            operate_post = name;
            $("#renameModalLabel").text("重命名: " + name);
            $("#edit-name").val(name);
            $("#renameModal").modal("show");
        }

        function delete_file() {
            let loading = new KZ_Loading('正在删除中...');
            let file = $("#delfile").text();
            loading.show();
            $.ajax({
                url: '/api/delete/',
                method: 'post',
                data: {"file": file},
                dataType: 'JSON',
                success: function (res) {
                    loading.destroy();
                    if (res.status) {
                        notyf.success('删除成功！');
                        for (let i = 0; i < posts.length; i++) {
                            if (escapeString(posts[i]["path"]) === escapeString(file)) {
                                posts.splice(i, 1);
                                $("#post-number").html(posts.length);
                                break;
                            }
                        }
                        change_page(_page);
                    } else {
                        notyf.error(res.msg);
                    }
                },
                error: function (res) {
                    loading.destroy();
                    notyf.error("网络错误！");
                }
            })
        }

        function rename_file() {
            let loading = new KZ_Loading('正在重命名中...');
            let new_name= $("#edit-name").val();
            loading.show();
            $.ajax({
                url: '/api/rename/',
                method: 'post',
                data: {"new": new_name, "file": operate_post},
                dataType: 'JSON',
                success: function (res) {
                    loading.destroy();
                    if (res.status) {
                        notyf.success('操作成功！');
                        location.reload();
                    } else {
                        notyf.error(res.msg);
                    }
                },
                error: function (res) {
                    loading.destroy();
                    notyf.error("网络错误！");
                }
            })
        }


    </script>
{% endblock javascripts %}
